<template>
  <div class="outer-title pd-bottom--32 pd-top--32">听课次数分析</div>
  <div>
    <p class="draw-title">课程状态：</p>
    <div class="draw-list__outer">
      <p
        class="draw-list__item"
        :class="{ 'draw-list__item--active': item.active }"
        v-for="item in list"
        :key="item.id"
        @click="choose(item)"
        >{{ item.name }}</p
      >
    </div>
  </div>
  <div class="draw-center none-border">
    <p class="draw-title--tab">数据时间：</p>
    <a-button class="mg-right--12" @click="chooseDay(7)">近7天</a-button>
    <a-button class="mg-right--12" @click="chooseDay(30)">近30天</a-button>
    <a-range-picker v-model:value="valueDate" @change="chooseTime" />
  </div>
  <line-chart width="100%" height="450px" :chartDetailData="allCompaniesDetail"></line-chart>
  <div class="outer-title pdt-32 mt-32">听课次数占比</div>
  <bar-chart width="100%" :chartDetailData="allBarDetail"></bar-chart>
</template>
<script lang="ts">
  import { defineComponent, reactive, toRefs, ref, onMounted } from 'vue'
  import { DynamicTable, TableQueryHeader } from '@/components/dynamic-table'
  import { useRoute } from 'vue-router'
  import { useStore } from '@/store'
  import lineChart from './components/line-tab1.vue'
  import barChart from './components/bar-tab1.vue'
  import { getCourseAssessTime, getCourseAssessTotal } from '@/api/data/index'

  export default defineComponent({
    name: 'Tab1',
    components: {
      lineChart,
      barChart,
    },
    setup() {
      const tableRef = ref<InstanceType<typeof DynamicTable>>()

      const valueDate = ref<moment.Moment[]>([])

      const route = useRoute()

      const store = useStore()

      const state = reactive({
        allCompaniesDetail: [] as any,
        allBarDetail: [] as any,
        queryparam: {
          day: 7,
        },
        list: [
          { id: 0, name: '全部', type: 0, active: true },
          { id: 1, name: '院领导', type: 0, active: false },
          { id: 2, name: '校领导', type: 0, active: false },
          { id: 3, name: '督导组', type: 0, active: false },
        ],
      })

      /**
       * @description 加载表格数据
       */
      // 获取折线图数据表
      const getLineData = async () => {
        const res = await getCourseAssessTime({})
        state.allCompaniesDetail = res.list
      }
      // 获取饼图数据
      const getPieData = async () => {
        const res = await getCourseAssessTotal({})
        state.allBarDetail = res.list
      }

      // 选择课程状态
      const choose = (item) => {
        state.list.map((v) => {
          v.id === item.id ? (v.active = true) : (v.active = false)
        })
      }
      // 选择天
      const chooseDay = (item) => {
        state.queryparam.day = item
      }
      // 联动日期
      const chooseTime = (ev) => {
        valueDate.value = ev
      }

      onMounted(async () => {
        getLineData()
        getPieData()
        state.allCompaniesDetail = [
          {
            time: '2022-01-10',
            human1: 100,
            human2: 200,
            human3: 300,
          },
          {
            time: '2022-02-10',
            human1: 300,
            human2: 200,
            human3: 100,
          },
          {
            time: '2022-03-10',
            human1: 400,
            human2: 150,
            human3: 170,
          },
        ]
        state.allBarDetail = [
          {
            name: '名字1',
            value: 300,
            amount: 300,
            detail: 'human1',
            percent: '40%',
          },
          {
            name: '名字2',
            value: 400,
            amount: 400,
            detail: 'human2',
            percent: '40%',
          },
          {
            name: '名字3',
            value: 180,
            amount: 180,
            detail: 'human3',
            percent: '20%',
          },
        ]
      })

      return {
        ...toRefs(state),
        tableRef,
        valueDate,
        choose,
        chooseDay,
        chooseTime,
      }
    },
  })
</script>
